<template>
  <div class="app-container">
    <el-row :gutter="10" class="pagetop">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card :body-style="{ padding: '0px' }">
          <div class="cardbody">
            <div class="cardup" style="background-color: #337ab7;">
              <span class="cardcontent">
                <h3>今日&nbsp;&nbsp;{{today.pageViewNum}}&nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="yesterday">昨日&nbsp;&nbsp;{{yesterday.pageViewNum}}</span>
                </h3>
              </span>
            </div>
            <div class="carddown">浏览量(PV)
              <span>
                <el-button size="mini" class="viewBtn" icon="caret-right" @click="reportDatatatic(1)"></el-button>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card :body-style="{ padding: '0px' }">
          <div class="cardbody">
            <div class="cardup" style="background-color: #5cb85c;">
              <span class="cardcontent">
                <h3>今日&nbsp;&nbsp;{{today.enterpriseNum}}&nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="yesterday">昨日&nbsp;&nbsp;{{yesterday.enterpriseNum}}</span>
                </h3>
              </span>
            </div>
            <div class="carddown">企业入驻数
              <span>
                <el-button size="mini" class="viewBtn" icon="caret-right" @click="reportDatatatic(2)"></el-button>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card :body-style="{ padding: '0px' }">
          <div class="cardbody">
            <div class="cardup" style="background-color: #f0ad4e;">
              <span class="cardcontent">
                <h3>今日&nbsp;&nbsp;{{today.archivesNum}}&nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="yesterday">昨日&nbsp;&nbsp;{{yesterday.archivesNum}}</span>
                </h3>
              </span>
            </div>
            <div class="carddown">新增追溯档案数
              <span>
                <el-button size="mini" class="viewBtn" icon="caret-right" @click="reportDatatatic(3)"></el-button>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card :body-style="{ padding: '0px' }">
          <div class="cardbody">
            <div class="cardup" style="background-color: #d9534f;">
              <span class="cardcontent">
                <h3>今日&nbsp;&nbsp;{{today.fakearchivesNum}}&nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="yesterday">昨日&nbsp;&nbsp;{{yesterday.fakearchivesNum}}</span>
                </h3>
              </span>
            </div>
            <div class="carddown">新增验证码档案数
              <span>
                <el-button size="mini" class="viewBtn" icon="caret-right" @click="reportDatatatic(4)"></el-button>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="pagecenter">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="产品类型">
          <el-select v-model="listQuery.type" placeholder="产品类型" class="selectStyle">
            <el-option v-for="item in productType" :key="item.code" :label="item.typeName" :value="item.typeName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产地址">
          <el-select v-model="province" placeholder="请选择省" class="selectStyle" :disabled="false">
            <el-option v-for="item in position.province.list" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
          <el-select v-model="city" placeholder="请选择市" class="selectStyle" :disabled="false">
            <el-option v-for="item in position.city.list" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
          <el-select v-model="town" placeholder="请选择县" class="selectStyle" :disabled="false">
            <el-option v-for="item in position.town.list" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker v-model="dateScope" type="daterange" placeholder="选择时间范围" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否建立验证码">
          <el-select v-model="listQuery.haveCreateFake" placeholder="防伪标识" class="selectStyle">
            <!-- <el-option label="全部" value=""></el-option>
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option> -->
            <el-option v-for="item in createFake" :key="item.dictvalue" :label="item.dictname" :value="item.dictvalue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序方式">
          <el-select v-model="listQuery.orderBy" placeholder="排序方式" class="selectStyle">
            <!-- <el-option label="默认" value=""></el-option>
              <el-option label="最近发布" value="最近发布"></el-option>
              <el-option label="验证码从多到少" value="验证码从多到少"></el-option> -->
            <el-option v-for="item in orders" :key="item.dictvalue" :label="item.dictname" :value="item.dictvalue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词查询">
          <el-input placeholder="企业名称或产品名称" v-model="listQuery.enterpriseNameOrProductionName" :maxlength="50" @keyup.enter.native="fetchData"></el-input>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button @click="fetchData" icon="search">查询</el-button>
          <el-button @click="resetFetch">
            <icon-svg icon-class="zhongzhi1"></icon-svg>&nbsp;&nbsp;重置条件</el-button>
          <el-button icon="document" @click="handleExcel" v-show="btnVisible.isExport">导出excel</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="pageborder">
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" highlight-current-row tooltip-effect="dark" style="width: 100%" :fit="true" :border="false">
        <el-table-column label='序号' min-width="80" header-align="center" align="center">
          <template scope="scope">
            {{ page.pageSize * (page.currentPage - 1) + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="档案编号" min-width="100" header-align="center" align="center">
          <template scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productionname" label="产品名称" min-width="260" :show-overflow-tooltip="true" header-align="center">
          <template scope="scope">
            <span>{{scope.row.productionname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="产品类型" min-width="100" header-align="center">
          <template scope="scope">
            <span>{{scope.row.type}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productionAddress" label="生产地址" min-width="260" header-align="center" :show-overflow-tooltip="true">
          <template scope="scope">
            {{scope.row.productionaddress}}
          </template>
        </el-table-column>
        <el-table-column prop="enterprisename" label="企业名称" min-width="260" :show-overflow-tooltip="true" header-align="center">
          <template scope="scope">
            <span>{{scope.row.enterprisename}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseAddress" label="企业地址" min-width="260" header-align="center" :show-overflow-tooltip="true">
          <template scope="scope">
            {{scope.row.enterpriseAddress}}
          </template>
        </el-table-column>
        <el-table-column prop="securitycodequantity" label="验证码使用数" min-width="130" header-align="center" align="right">
          <template scope="scope">
            <span>{{scope.row.securitycodequantity}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdate" label="发布时间" min-width="170" header-align="center">
          <template scope="scope">
            <span>{{scope.row.createdate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditstatus" label="审核状态" min-width="100" header-align="center">
          <template scope="scope">
            <span>{{scope.row.auditstatus}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="approveddateStr" label="过审时间" min-width="170" header-align="center">
          <template scope="scope">
            <span>{{scope.row.approveddateStr}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="twodimensioncodepath" label="追溯二维码" min-width="110" header-align="center">
          <template scope="scope">
            <!-- <span>
                        <img v-if="scope.row.twodimensioncodepath"  
                          :src="scope.row.twodimensioncodepath"                 
                          width="20px" height="20px">
                        <span v-else>无二维码</span>
                    </span> -->
            <el-button @click.native.prevent="viewQr(scope.$index, scope.row.twodimensioncodepath)" size="small">
              <icon-svg icon-class="erweima"></icon-svg>&nbsp;&nbsp;点击查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination" v-if="page.total > 0 ? true : false">
      <el-pagination @current-change="handleCurrentChange" :page-size="page.pageSize" :current-page.sync="page.currentPage" layout="total, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<style scoped>
.pagetop {
  margin-bottom: 20px;
}

.pagination {
  text-align: center;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.colSpace {
  margin-left: 5px;
}

.cardbody {
  margin-top: 0px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.cardup {
  padding: 1px 10px;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.cardcontent {
  color: white;
}

.yesterday {
  font-size: 14px;
}

.carddown {
  padding: 10px 10px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewBtn {
  float: right;
}

.selectStyle {
  width: 145px;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>

<script>
import { getList, getReportDataByDate } from 'api/report';
import { getProductTypeList, getPositionList, getProductionOrdersList, getHaveCreateFakeList } from 'api/system';
import { parseTime } from 'utils/index.js';
import Cookies from 'js-cookie';
import { btnIsVisible, getUrlParams, trimStr } from 'utils/customer';

export default {
  data() {
    return {
      yesterday: {
        pageViewNum: 0,
        enterpriseNum: 0,
        archivesNum: 0,
        fakearchivesNum: 0,
      },
      today: {
        pageViewNum: 0,
        enterpriseNum: 0,
        archivesNum: 0,
        fakearchivesNum: 0,
      },
      list: [],
      listQuery: {
        productionPositionCode: null,
        type: '',
        haveCreateFake: '',
        createdatestart: '',
        createdateend: '',
        orderBy: '',
        enterpriseNameOrProductionName: ''
      },
      page: {
        pageSize: null,
        total: null,
        totalPage: null,
        currentPage: null
      },
      listLoading: true,
      dateScope: null,
      position: {
        province: {
          list: null,
          isEnable: false
        },
        city: {
          list: null,
          isEnable: true
        },
        town: {
          list: null,
          isEnable: true
        }
      },
      province: null,
      city: null,
      town: null,
      productType: [],
      positionCode: null,
      excelParams: '',
      excelUrl: '',
      btnVisible: {
        isExport: false,
      },
      createFake: [],
      orders: []
    }
  },
  watch: {
    province() {
      this.getPosition(2);
      this.position.city.list = null; this.city = null;
      this.position.town.list = null; this.town = null;
      this.listQuery.productionPositionCode = this.province;
    },
    city() {
      this.getPosition(3);
      this.position.town.list = null; this.town = null;
      this.listQuery.productionPositionCode = this.city;
    },
    town() {
      this.listQuery.productionPositionCode = this.town;
    },
    'listQuery.type': function(val, oldval) {
      if (val) {
        this.handleCurrentChange(1)
      } else {
        if (!val && oldval) {
          this.handleCurrentChange(1)
        }         
      }
    },
    'listQuery.haveCreateFake': function(val, oldval) {
      if (val) {
        this.handleCurrentChange(1)
      } else {
        if (!val && oldval) {
          this.handleCurrentChange(1)
        }
      }
    },
    'listQuery.orderBy': function(val, oldval) {
      if (val) {
        this.handleCurrentChange(1)
      } else {
        if (!val && oldval) {
          this.handleCurrentChange(1)
        }
      }
    },
    'listQuery.productionPositionCode': function(val, oldval) {
      if (val || (oldval && !val)) {
        this.handleCurrentChange(1)
      }
    },
    dateScope: function(val, oldval) {
      if (val || (oldval && !val)) {
        this.listQuery.createdatestart = null;
        this.listQuery.createdateend = null;
        this.handleCurrentChange(1)
      }
    },
  },
  created() {
    this.getProductType();
    this.getHaveFakeList();
    this.getOrdersList();
    this.getPosition(1);
    this.getReportData();
    this.fetchData();
    this.getBtnVisbleStatus();
  },
  methods: {
    getBtnVisbleStatus() {
      this.btnVisible.isExport = btnIsVisible('STATIC_REPORT_EXPORT') || false;
    },
    getProductType() {
      getProductTypeList().then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.productType = res.data;
        }
      })
    },
    getHaveFakeList() {
      getHaveCreateFakeList().then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.createFake = res.data
        }
      })
    },
    getOrdersList() {
      getProductionOrdersList().then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.orders = res.data
        }
      })
    },
    getPosition(level) {
      let pisCode = null;
      switch (level) {
        case 1: pisCode = null; break;
        case 2: pisCode = this.province; break;
        case 3: pisCode = this.city; break;
        default: break;
      };
      let parentcode = {
        parentcode: pisCode
      };
      getPositionList(parentcode).then(response => {
        let res = response.data;
        if (res.flag === 1) {
          switch (level) {
            case 1: this.position.province.list = res.data; break;
            case 2: this.position.city.list = res.data; break;
            case 3: this.position.town.list = res.data; break;
            default: break;
          }
        }
      })
    },
    resetFetch() {
      this.listQuery.type = '';
      this.dateScope = null;
      this.town = null;
      this.city = null;
      this.province = null;
      this.page.currentPage = 1;
      this.listQuery.productionPositionCode = null;
      this.listQuery.haveCreateFake = null;
      this.listQuery.orderBy = null;
      this.listQuery.enterpriseNameOrProductionName = null;
      this.handleCurrentChange(1)
    },
    fetchData() {
      this.listLoading = true;
      this.page.pageSize = this.page.pageSize || 10;
      this.page.currentPage = this.page.currentPage || 1;
      this.listQuery.currentPage = this.page.currentPage;
      this.listQuery.pageSize = this.page.pageSize;
      this.listQuery.type = this.listQuery.type || '';
      if (this.dateScope) {
        if (this.dateScope[0] && this.dateScope[1]) {
          this.listQuery.createdatestart = parseTime(this.dateScope[0]);
          this.listQuery.createdateend = parseTime(this.dateScope[1]);
        } else {
          this.listQuery.createdatestart = '';
          this.listQuery.createdateend = '';
        }
      }
      this.listQuery.productionPositionCode = this.town || this.city || this.province;
      this.listQuery.haveCreateFake = this.listQuery.haveCreateFake || '';
      this.listQuery.orderBy = this.listQuery.orderBy || '';
      this.listQuery.enterpriseNameOrProductionName = trimStr(this.listQuery.enterpriseNameOrProductionName) || '';
      this.excelParams = getUrlParams(this.listQuery)
      getList(this.listQuery).then(response => {
        let res = response.data;
        if (res.flag) {
          this.list = res.data;
          this.page = res.page;
        }
        this.listLoading = false;
      })
    },
    // 查询报表数据
    getReportData() {
      let requestParams = {
        createdate: parseTime(Date())
      }
      getReportDataByDate(requestParams).then(response => {
        let res = response.data;
        if (res.flag === 1) {
          let resData = res.data;
          this.today = resData.today || this.today;
          this.yesterday = resData.yesterday || this.yesterday;
        }
      });
    },
    handleExcel() {
      if (this.list.length <= 0) return;
      this.excelUrl = '/trc-service-product/production/exportTraceArchivesForReportStatistics' + this.excelParams;
      window.location.href = this.excelUrl;
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleDivisionChange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    reportDatatatic(type) {
      switch (type) {
        case 1: this.$router.push({ path: 'datastatic', query: { type: 1 } }); break;
        case 2: this.$router.push({ path: 'datastatic', query: { type: 2 } }); break;
        case 3: this.$router.push({ path: 'datastatic', query: { type: 3 } }); break;
        case 4: this.$router.push({ path: 'datastatic', query: { type: 4 } }); break;
        default: break;
      }
    },
    viewQr(index, qrUrl) {
      // console.log(row);
      window.open(qrUrl)
    }
  }
};
</script>